<template>
    <div>
        {{ form }}
        {{ ids }}
        <h1 style="text-align: center;">显示列表</h1>
        房号名称:<input type="text" v-model="form.rname">
        房型: <select v-model="form.rtype">
                        <option value="">请选择</option>
                        <option value="标间">标间</option>
                        <option value="豪华间">豪华间</option>
              </select>  
              房态 :<select v-model="form.rsdata"> 
                        <option value="">请选择</option>
                        <option value="入住中">入住中</option>
                        <option value="未入住">未入住</option>
                    </select>   
        <input type="button" value="查询" @click="pageshow()">
        <table class="table">
            <tr>
                 <td>
                    <input type="checkbox" v-model="checkall" @change="checkallid" >
                </td>
                <td>房号名称</td>
                <td>房型名称</td>
                <td>照片</td>
                <td>售价</td>
                <td>房间数量</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in RoomTypeList" :key="item.rid">
                <td>
                    <input type="checkbox" :value="item.rid" v-model="ids" >
                </td>
                <td>{{ item.rname }}</td>
                <td>{{ item.rtype }}</td>
                <td><img :src="item.rimg" style="width: 120px;height: 100px;"> </td>
                <td>{{ item.rprice }}</td>
                <td>{{ item.rnus }}</td>
                <td><a @click="del(item.rid)">删除</a><a @click="upda(item.rid)">修改</a></td>
            </tr>
            共{{ form.totalCount }}条,每页{{ form.pageSize }}条,共{{ form.pageIndex }}/{{ form.pageCount }}条
            <a @click="Page(1)">首页</a><a @click="Page(form.pageIndex-1)">上一页</a><a @click="Page(form.pageIndex+1)">下一页</a><a @click="Page(form.pageCount)">尾页</a>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import axios from "axios";
import "bootstrap/dist/css/bootstrap.min.css";
import { useRouter } from "vue-router"
import router from "@/router";

const RoomTypeList = ref([]);
 

const checkall = ref(false);

const checkallid = () => {
    ids.value = [];
    if (checkall.value)
    {
        ids.value = RoomTypeList.value.map(x=>x.id);
    }
}

const form = reactive({
    pageIndex: 1,
    pageSize: 3,
    rname:"",
    rtype:" ",
    rsdata:" ",
    totalCount: 0,
    pageCount: 0,
    index:"",
})

const pageshow = () => {
    axios.get("https://localhost:7270/api/RoomType/PageShow", {
        params: {
            pageIndex: form.pageIndex,
            pageSize: form.pageSize,
            rname: form.rname,
            rtype: form.rtype || 0,
            rsdata:form.rsdata || 0
        }
    }).then(res => {
        console.log(res.data);
        console.log(res.data.list);
        RoomTypeList.value = res.data.list

        form.totalCount = res.data.totalCount
        form.pageCount = res.data.pageCount
    })
}

onMounted(() => {
    pageshow()
})

const Page = (index: number) => {
    if (index < 1)
    {
        index =1
    }
    if (index > form.pageCount)
    {
        index = form.pageCount
    }
    form.pageIndex = index;
    pageshow()
}

const upda = (id:number) => {
    router.push("/upda?rid=" + id);
}

const ids = ref([])

const del = () => { 
    if (confirm("确认要删除吗?"))
    {
    axios.put("https://localhost:7270/api/RoomType/DelMore", ids.value ).then(res => {
        if (res.data > 0)
        {
            alert("删除成功!")
            pageshow()
        }
        else
        {
            alert("删除失败!")
        }
    })
    
    }
}

</script>

<style scoped>

</style>